<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="../styles/reset.css">
  <link rel="stylesheet" href="../styles/font.css">
  <link rel="stylesheet" href="../styles/base.css">
  <link rel="stylesheet" href="../styles/css/apply.css">
  <title>瑜伽星人</title>
</head>
<style>
  .container{
    background: url('http://cdn.50yoga.cn/pics/public/sweet/images/shopkeeper/apply-bg.png') no-repeat center;
    background-size: cover;
  }
  .content{
    margin-top: 11rem;
    line-height: 1.8;
  }
  .heartBeat {
  animation-name: heartBeat;
  -webkit-animation-name: heartBeat;

  animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;

  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@keyframes heartBeat {
  0% {
    transform: scale(0.9);
    opacity: 0.7;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.9);
    opacity: 0.7;
  }
}

@-webkit-keyframes heartBeat {
  0% {
    -webkit-transform: scale(0.95);
    opacity: 0.7;
  }
  50% {
    -webkit-transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0.95);
    opacity: 0.7;
  }
}
.prompt{
  width: 100%;
  position: absolute;
  bottom: 6%;
  text-align: center;
}
</style>

<body>
  <div class="container" onclick="window.location='./map.html';">
    <div class="content"></div>
    <p class="prompt heartBeat">点击进入</p>
  </div>
</body>
<script>
  function text(str) {
    var arr = [];
    var text = document.getElementsByClassName("content")[0];
    for (var i = 0; i < str.length; i++) { arr[i] = str[i]; }
    var p = document.createElement("p");
    text.appendChild(p);
    var index = 0;
    var obj = setInterval(function () {
      if (index < arr.length) {
        var text = document.createTextNode(arr[index]);
      }
      p.appendChild(text);
      index++;
    }, 200);

  }
  window.onload = function () {
    text("新世纪，人族懒散，世间肥态百出，幸天降外星人，传授瑜伽，塑苗条之身，炼健康之体，修从容之气质，救万民于浮世，天下应者甚众......");
  }
</script>

</html>